<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App 返回按钮组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #2c3e50);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
        }

        header {
            text-align: center;
            padding: 40px 0;
            margin-bottom: 30px;
        }

        h1 {
            font-size: 3.2rem;
            margin-bottom: 15px;
            background: linear-gradient(to right, #00c9ff, #92fe9d);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            display: inline-block;
        }

        h1::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 4px;
            background: linear-gradient(to right, #00c9ff, #92fe9d);
            border-radius: 2px;
        }

        .subtitle {
            font-size: 1.3rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-top: 40px;
        }

        .panel {
            background: rgba(30, 30, 50, 0.7);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            position: relative;
            min-height: 400px;
        }

        .panel-title {
            font-size: 1.8rem;
            margin-bottom: 25px;
            color: #00c9ff;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 返回按钮组件样式 */
        .back-button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 25px;
            background: linear-gradient(to right, #00c9ff, #92fe9d);
            color: #1a2a6c;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .back-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .back-button:active {
            transform: translateY(1px);
        }

        .back-button i {
            margin-right: 10px;
            transition: transform 0.3s ease;
        }

        .back-button:hover i {
            transform: translateX(-5px);
        }

        .back-button::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            transition: all 0.6s ease;
        }

        .back-button:hover::before {
            left: 100%;
        }

        /* 不同样式变体 */
        .back-button.outline {
            background: transparent;
            border: 2px solid #00c9ff;
            color: #00c9ff;
        }

        .back-button.rounded {
            border-radius: 12px;
        }

        .back-button.icon-only {
            width: 50px;
            height: 50px;
            padding: 0;
            border-radius: 50%;
        }

        .back-button.icon-only i {
            margin-right: 0;
        }

        .back-button.small {
            padding: 8px 16px;
            font-size: 0.9rem;
        }

        .back-button.large {
            padding: 15px 30px;
            font-size: 1.3rem;
        }

        .back-button.dark {
            background: linear-gradient(to right, #1a2a6c, #2c3e50);
            color: #fff;
        }

        /* 导航栏示例 */
        .navbar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 30px;
            background: rgba(20, 20, 40, 0.8);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .navbar-title {
            font-size: 1.4rem;
            font-weight: 600;
        }

        .example-content {
            margin-top: 80px;
        }

        .example-title {
            font-size: 1.6rem;
            margin-bottom: 20px;
            color: #92fe9d;
        }

        .example-text {
            line-height: 1.8;
            margin-bottom: 25px;
        }

        /* 组件演示区域 */
        .demo-area {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
        }

        .demo-card {
            background: rgba(40, 60, 100, 0.6);
            border-radius: 15px;
            padding: 25px;
            flex: 1;
            min-width: 200px;
        }

        .demo-title {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: #00c9ff;
        }

        .code-block {
            background: rgba(20, 20, 40, 0.8);
            border-radius: 10px;
            padding: 20px;
            font-family: monospace;
            white-space: pre-wrap;
            line-height: 1.6;
            margin-top: 25px;
            overflow: auto;
        }

        .usage-section {
            margin-top: 30px;
        }

        .usage-item {
            display: flex;
            gap: 15px;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .usage-item:last-child {
            border-bottom: none;
        }

        .usage-icon {
            font-size: 1.5rem;
            color: #92fe9d;
            min-width: 30px;
        }

        .usage-text {
            flex: 1;
        }

        .usage-title {
            font-weight: 600;
            margin-bottom: 5px;
        }

        @media (max-width: 900px) {
            .content {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 2.5rem;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <header>
            <h1><i class="fas fa-arrow-left"></i> Vue 返回按钮组件</h1>
            <p class="subtitle">一个功能丰富、高度可定制的返回按钮组件，适用于各种Vue应用场景</p>
        </header>

        <div class="content">
            <div class="panel">
                <div class="navbar">
                    <back-button @click="goBack" class="small"></back-button>
                    <div class="navbar-title">用户详情页面</div>
                    <div></div> <!-- 占位元素 -->
                </div>

                <div class="example-content">
                    <div class="example-title">用户信息</div>
                    <div class="example-text">
                        <p>姓名: {{ currentUser.name }}</p>
                        <p>职位: {{ currentUser.title }}</p>
                        <p>邮箱: {{ currentUser.email }}</p>
                        <p>注册时间: {{ currentUser.joinDate }}</p>
                    </div>

                    <div class="example-title">个人简介</div>
                    <div class="example-text">
                        {{ currentUser.bio }}
                    </div>

                    <back-button @click="goBack" class="large" style="margin-top: 30px;">
                        <i class="fas fa-arrow-left"></i> 返回用户列表
                    </back-button>
                </div>
            </div>

            <div class="panel">
                <h2 class="panel-title"><i class="fas fa-palette"></i> 按钮样式变体</h2>

                <div class="demo-area">
                    <div class="demo-card">
                        <div class="demo-title">默认样式</div>
                        <back-button @click="goBack">
                            <i class="fas fa-arrow-left"></i> 返回
                        </back-button>
                    </div>

                    <div class="demo-card">
                        <div class="demo-title">轮廓样式</div>
                        <back-button @click="goBack" class="outline">
                            <i class="fas fa-arrow-left"></i> 返回
                        </back-button>
                    </div>

                    <div class="demo-card">
                        <div class="demo-title">图标按钮</div>
                        <back-button @click="goBack" class="icon-only">
                            <i class="fas fa-arrow-left"></i>
                        </back-button>
                    </div>

                    <div class="demo-card">
                        <div class="demo-title">深色主题</div>
                        <back-button @click="goBack" class="dark">
                            <i class="fas fa-arrow-left"></i> 返回
                        </back-button>
                    </div>

                    <div class="demo-card">
                        <div class="demo-title">圆角样式</div>
                        <back-button @click="goBack" class="rounded">
                            <i class="fas fa-arrow-left"></i> 返回
                        </back-button>
                    </div>

                    <div class="demo-card">
                        <div class="demo-title">小尺寸</div>
                        <back-button @click="goBack" class="small">
                            <i class="fas fa-arrow-left"></i> 返回
                        </back-button>
                    </div>
                </div>

                <div class="usage-section">
                    <h2 class="panel-title"><i class="fas fa-code"></i> 组件使用</h2>

                    <div class="code-block">
                        // 1. 导入组件
                        import BackButton from '@/components/BackButton.vue';

                        export default {
                        components: {
                        BackButton
                        },
                        methods: {
                        goBack() {
                        // 返回上一页
                        this.$router.go(-1);

                        // 或者返回特定路由
                        // this.$router.push('/home');
                        }
                        }
                        }

                        // 2. 在模板中使用
                        &lt;template&gt;
                        &lt;div&gt;
                        &lt;back-button @click="goBack"&gt;
                        &lt;i class="fas fa-arrow-left"&gt;&lt;/i&gt; 返回
                        &lt;/back-button&gt;

                        &lt;!-- 使用样式变体 --&gt;
                        &lt;back-button @click="goBack" class="outline icon-only"&gt;
                        &lt;i class="fas fa-arrow-left"&gt;&lt;/i&gt;
                        &lt;/back-button&gt;
                        &lt;/div&gt;
                        &lt;/template&gt;
                    </div>

                    <div class="usage-item">
                        <div class="usage-icon"><i class="fas fa-info-circle"></i></div>
                        <div class="usage-text">
                            <div class="usage-title">组件特性</div>
                            <div>支持所有标准按钮属性，可自定义图标、文本和样式</div>
                        </div>
                    </div>

                    <div class="usage-item">
                        <div class="usage-icon"><i class="fas fa-cog"></i></div>
                        <div class="usage-text">
                            <div class="usage-title">自定义事件</div>
                            <div>@click: 点击按钮时触发，可在此执行导航逻辑</div>
                        </div>
                    </div>

                    <div class="usage-item">
                        <div class="usage-icon"><i class="fas fa-paint-brush"></i></div>
                        <div class="usage-text">
                            <div class="usage-title">样式定制</div>
                            <div>通过class属性应用不同样式变体：outline, rounded, dark, small, large, icon-only</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 返回按钮组件
    Vue.component('BackButton', {
        template: `
                <button
                    class="back-button"
                    :class="computedClasses"
                    @click="handleClick"
                >
                    <slot>
                        <i class="fas fa-arrow-left"></i> 返回
                    </slot>
                </button>
            `,
        props: {
            // 样式变体
            outline: Boolean,
            rounded: Boolean,
            dark: Boolean,
            small: Boolean,
            large: Boolean,
            iconOnly: Boolean
        },
        computed: {
            computedClasses() {
                return {
                    'outline': this.outline,
                    'rounded': this.rounded,
                    'dark': this.dark,
                    'small': this.small,
                    'large': this.large,
                    'icon-only': this.iconOnly
                };
            }
        },
        methods: {
            handleClick(event) {
                this.$emit('click', event);
            }
        }
    });

    // 主应用
    new Vue({
        el: '#app',
        data() {
            return {
                currentUser: {
                    id: '101',
                    name: '张明',
                    title: '高级前端工程师',
                    email: 'zhang.ming@example.com',
                    joinDate: '2020年3月15日',
                    bio: '拥有8年前端开发经验，专注于构建高性能、用户友好的Web应用。精通Vue生态系统，对React和Angular也有丰富经验。热衷于开源项目和技术分享，曾多次在技术社区发表演讲。'
                }
            }
        },
        methods: {
            goBack() {
                // 模拟返回功能
                alert('执行返回操作，在实际应用中会导航回上一页');
                // 实际应用中可能使用:
                // this.$router.go(-1);
            }
        }
    });
</script>
</body>
</html>
